<template>
    <div class="rich-text-box">
        <froala :tag="'textarea'" :config="config" v-model="model" class="rich-text-box selector"></froala>
    </div>
</template>

<script>
    import Config from '@/config/config';
    // import config from '@/config/config';
    // import $ from './jquery-vendor.js';
    // import './froala_editor.pkgd.min.js';
    // import 'froala-editor/js/froala_editor.pkgd.min.js';
    // import 'froala-editor/css/froala_editor.pkgd.min.css';
    // import 'font-awesome/css/font-awesome.css';
    // import 'froala-editor/css/froala_style.min.css';
    // import 'froala-editor/js/languages/zh_cn.js';
    // import VueFroala from 'vue-froala-wysiwyg';

    export default {
        props:{
            uploadAction: {
                type: String,
                default: '/file/upload'
            },
        },
        watch:{

            model(){
                this.$emit('outputVal',this.model);
            }
        },
        data () {
            return {
                model: '',
                authorization:this.$ls.get('AUTHORIZATION'),
                config: {
                    placeholderText: '请输入内容',
                    heightMin:300,
                    zIndex:2501,
                    language: 'zh_cn',
                    toolbarButtons: [
                        'fullscreen',
                        '|',
                        'undo',
                        'redo',
                        // 'clearFormatting',
                        // '|',
                        'bold',
                        'italic',
                        'underline',
                        'strikeThrough',
                        // 'fontFamily',
                        'fontSize',
                        // 'paragraphStyle',
                        // 'paragraphFormat',
                        '|',
                        'align',
                        // 'indent',
                        // 'outdent',
                        // 'formatOL',
                        // 'formatUL',
                        // '|',
                        'color',
                        'insertHR',
                        'insertLink',
                        'insertImage',
                        // 'subscript',
                        // 'superscript',
                        ],
                    quickInsertButtons:['image'],
                    imageUploadParam: 'file', // 跟后台的接收maul的filename对应
                    imageUploadParams: {fileType: '3'},
                    imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif', 'bmp'],
                    imageUploadURL: `${Config.url}${this.uploadAction}`,
                    requestHeaders:{
                        Authorization:`${this.$ls.get('AUTHORIZATION')['token']}`
                    },
                    events: {
                        // 'froalaEditor.initialized': function (e,editor) {
                        //     this.model=editor;
                        // },
                        'froalaEditor.blur':()=>{
                        },
                        // 'froalaEditor.html.get':(e,editor,html)=>{
                        //     // console.log(html);
                        // },
                        // 'froalaEditor.image.inserted': (e, editor, $img, response) => {
                        //     // console.log(e);
                        //     // console.log(editor);
                        //     // console.log($img);
                        //     // console.log(response);
                        //     // // $img.addClass('img-mobile');
                        //     // // if (response) {
                        //     // //     let res = JSON.parse(response);
                        //     // //     if (res) {
                        //     // //         console.log(res);
                        //     // //         $img.attr('mobile-src', res.data.ext1);
                        //     // //     }
                        //     // // }
                        // },
                        // 'froalaEditor.image.error':(e,editor,error, response)=>{
                        //     console.info(response);
                        //     // Bad link.
                        //     if (error.code == 1) {
                        //         console.log(error.code);
                        //     }
                        //
                        //     // No link in upload response.
                        //     else if (error.code == 2) {  console.log(error.code); }
                        //
                        //     // Error during image upload.
                        //     else if (error.code == 3) {  console.log(error.code); }
                        //
                        //     // Parsing response failed.
                        //     else if (error.code == 4) {  console.log(error.code); }
                        //
                        //     // Image too text-large.
                        //     else if (error.code == 5) { console.log(error.code); }
                        //
                        //     // Invalid image type.
                        //     else if (error.code == 6) {  console.log(error.code); }
                        //
                        //     // Image can be uploaded only to same domain in IE 8 and IE 9.
                        //     else if (error.code == 7) {  console.log(error.code); }
                        //
                        //     // Response contains the original server response to the request if available.
                        // }
                    }
                },
            };
        },
        methods: {
            getContent(val){//获取内容
                this.model=val;
            },
            clear(){
                this.model='';
            }
        }
    };
</script>

<style>
    .rich-text-box p{
        margin-bottom:0!important;
        line-height: initial;
    }
</style>
